// 动态渲染: 把数据通过js的方式添加到页面中(一般数据都是后台给的)
// 模拟后台数据
//api按钮列表数据
//JSON数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]
//先获取api-btn-list容器
let apiBtnList = document.querySelector(".api-btn-list")
// console.log(apiBtnList)
apiTypeData.forEach(function(v,i){
    //三目运算符:   条件? 条件为真 : 条件为假
    apiBtnList.innerHTML += `<a href="" class="${v.isnew? "bold" :"" }">${v.name}</a>`
})
// 获取所有的a标签
let btnList = document.querySelectorAll(".api-btn-list a")
console.log(btnList)
let label = document.querySelector("label")
btnList.forEach(function(v,i){
    //v是a标签
    v.onclick = function(){
        // console.log("点击")
        // 先清除所有标签的active类名
        btnList.forEach(function(v2,i2){
            v2.classList.remove("active")
        })
        //给当前a添加类名: active
        v.classList.add("active")
        console.log(apiTypeData[i])
        label.innerHTML = `<span>${apiTypeData[i].name}</span>
        <input type="text" placeholder="${apiTypeData[i].keyword}">`
        //阻止a标签的默认行为
        return false;
    }
})

// 动态渲染api列表
//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
]

//先获取父容器api-list
let apiList = document.querySelector(".api-list")
// console.log(apiList)
// 通过遍历, 拿到数组的每一项(对象)
listDataArr.forEach(function(v,i){
    // { img: "xxx", name: "xxx", price: "xx", isSpecial: false },
    apiList.innerHTML += `
    <li>
        ${ v.isSpecial ? "<span>企业专用</span>" : ""}
        <a href="">
            <img src="../images/${ v.img }" alt="">
            <p class="title">${ v.name }</p>
            <p class="price ${ v.price == "免费"? "green": "red"}">
                ${ v.price }
            </p>
        </a>
        <button>申请数据</button>
    </li>
    `
})


